<template lang="pug">
el-form(
  :model="form"
  :rules="rules"
  ref="ruleForm"
  label-width="150px"
  :validate-on-rule-change="false"
)
  .upload-section-form
    .upload-section
      .upload-section-header
        .upload-section-title 基本信息
      .upload-section-content
        el-form-item(label="样品分类：")
          .form-item-bd.flex-center
            .form-item-value {{materialData.currentValue}}
            .form-item-edit(@click="prev")
              .iconfont.el-icon-edit-outline
              span 编辑
        el-form-item(label="材料名称：" prop="sampleName")
          .form-item-input
            el-input(size="mini" placeholder="请输入样品名称" v-model="form.sampleName" maxlength="64" show-word-limit)
        el-form-item(label="样品品牌：" prop="sampleBrands")
          el-select(size="mini" placeholder="请选择样品品牌" filterable v-model="form.sampleBrands")
            el-option(
              v-for="item in brands"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            )
        el-form-item(label="供应商名称：" prop="supplierId")
          el-select(size="mini" placeholder="请选择供应商" filterable v-model="form.supplierId")
            el-option(
              v-for="item in suppliersList"
              :key="item.objectId"
              :label="item.companyName"
              :value="item.objectId"
            )
        el-form-item(label="供应商联系人：" prop="supplierPrincipal")
          .form-item-input
            el-input(size="mini" placeholder="请填写供应商联系人" v-model="form.supplierPrincipal")
        el-form-item(label="供应商联系电话：" prop="supplierPhone")
          .form-item-input
            el-input(size="mini" placeholder="请填写供应商联系电话" v-model="form.supplierPhone")
        el-form-item(label="生产产地：" prop="prodPlace")
          el-select(size="mini" placeholder="选择" v-model="form.prodPlace" @change="selectProvince")
            el-option(
              v-for="item in province"
              :key="item.keyColumn"
              :label="item.valueColumn"
              :value="item.keyColumn"
            )
        el-form-item(label="材料型号：" prop="materialType" maxlength="30" show-word-limit)
          .form-item-input
            el-input(size="mini" placeholder="请输入材料型号" v-model="form.materialType" maxlength="30" show-word-limit)
        el-form-item(label="材料属性：" required)
          el-radio-group(v-model="form.sampleAttribute")
            el-radio(:label="1") 硬装
            el-radio(:label="2") 软装
        el-form-item(label="材料使用业态：" prop="stylesSet")
          el-checkbox-group(v-model="form.stylesSet")
            el-checkbox(v-for="item in styleList" :key="item.styleId" :label="item.styleId") {{item.styleName}}
        el-form-item(label="供货周期：" prop="sampleDeliveryCycle")
          .flex-center
            el-autocomplete(size="mini" type="number" :fetch-suggestions="fetchSupplyCycle" value-key="num" v-model="form.sampleDeliveryCycle" placeholder="请输入供货周期")
            .form-item-ft-info 天
        el-form-item(label="送样时间：" prop="sampleDeliverTime")
          .flex-center
            el-autocomplete(size="mini" type="number" :fetch-suggestions="fetchSupplyCycle" value-key="num" v-model="form.sampleDeliverTime" placeholder="请输入预计送样时间")
            .form-item-ft-info 天
        el-form-item(label="材料上架：" required)
          el-switch(v-model="form.onSale")
        el-form-item(label="材料推荐：" required)
          el-switch(v-model="form.recommend")
        el-form-item(label="新品材料：" required)
          el-switch(v-model="form.newFlag")
        el-form-item(label="仓库货架位置：")
          .form-item-input
            el-input(size="mini" placeholder="请输入仓库货架号" v-model="form.shelfLocation")
    .upload-section
      .upload-section-header
        .upload-section-title 库存规格
      .upload-section-content
        .upload-form-bd-header
          .form-bd-title 规格设置
          el-popover(
            placement="bottom"
            popper-class="model-popover"
            width="200"
            trigger="click"
            :visible-arrow="false"
          )
            .model-body
              .model-list
                .model-item(v-for="item, index in specModal" :key="index" @click.stop="changeModel(item, 'spec')")
                  .model-item-title {{item.name}}
                  .model-item-handle
                    .iconfont.icon-edit(@click.stop="editModelList(item, 'editSpecModel')")
                    .iconfont.icon-trash(@click.stop="delModelList(item)")
            .form-bd-select(slot="reference" v-show="specModal.length")
              .form-bd-select-value(:class="{ 'form-bd-select-value-placeholder' : !currentSpecModel.name }") {{currentSpecModel.name ? currentSpecModel.name : '更换模板'}}
              .form-bd-select-icon.el-icon-arrow-down
          .form-bd-header-handle
            .form-bd-header-btn(v-if="currentSpecModel.id" @click="saveSpecModal") 保存模板
            .form-bd-header-btn(@click="addSpecModal('editSpecModel')") 存为新模板
        .form-item.form-item-start
          .form-item-label.form-item-label_import 材料规格：
          .form-item-spec
            draggable(:list="form.spec.items", v-bind="dragOptions" @end="draggableEnd")
              transition-group(type="transition" name="flip-list" tag="div")
                .spec-table(v-for="(item, index) in form.spec.items", :key="`spec_${index}`" v-if="form.spec.items.length")
                  .spec-table-header
                    .spec-hd-value
                      .spec-hd-value-label 规格名称
                      .spec-hd-value-bd
                        el-input(size="mini" placeholder="请输入规格" maxlength="6" show-word-limit v-model="item.name" @change="changeSpecName(item, index)")
                    .spec-hd-handle(@click="delSpec(item, index)")
                      .icon-trash
                      .spec-hd-handle-btn 删除
                  .spec-table-body
                    .spec-table-body-label 规格值
                    draggable.form-item-draggable(:list="item.values", v-bind="dragChildOptions" handle=".spec-item-ft")
                      transition-group.form-item-draggable-transition(type="transition" name="flip-list" tag="div")
                        .spec-table-body-value(v-for="(row, rowIndex) in item.values" :key="rowIndex" v-if="item.name")
                          .spec-table-body-input
                            .iconfont.el-icon-error(@click="delSpecValue(row, rowIndex, item.values)")
                            el-input(v-model="row.name" size="mini" @change="changeSpecValue(item, row, index, rowIndex)")
                          .spec-table-body-uploadbtn(v-if="item.showUploadBtn")
                            .spec-table-body-img(v-if="row.image", @click="seeImage(row.image)" :style="row.image | filterUrl")
                              .iconfont.el-icon-error(@click="deleteImage(row, rowIndex)")
                            ali-upload(v-else @getFileInfo="changeFile($event, index, rowIndex)" accept="image/png, image/jpeg, image/jpg")
                              .spec-table-body-upload 上传图片
                          .spec-item-ft
                            .iconfont.icon-move
                    .spec-table-body-ft(@click="addSpec(item)" v-if="item.name") 添加规格值
            .spec-table-handle
              el-button(size="mini" icon="el-icon-plus" plain @click="settingSpec") 添加规格
              .spec-table-handle-info 最多3个
        .form-item.form-item-start.spec-sku(v-if="form.spec.prices.body.length")
          .form-item-label.form-item-label_import 规格明细：
          .spec-sku-table
            .spec-sku-info SKU表将根据规格的变化动态生成，请填写价格、库存等信息
            .spec-sku-table-body
              navbar(:navbar="form.spec.prices.header")
              .table-list
                .table-tr(v-for="row, rowIndex in form.spec.prices.body" :key="`input_${rowIndex}`" v-if="rowIndex === 0")
                  .table-td(
                    v-for="item, index in row"
                    :key="index"
                  )
                    .table-td-body.table-td-input(v-if="index > (row.length - 6)")
                      el-input(size="mini" placeholder="0.00" v-if="index === (row.length - 5)" @change="changePrice(5, 'min_selling_price')" v-model="skuForm.min_selling_price")
                      el-input(size="mini" placeholder="0.00" v-if="index === (row.length - 4)" @change="changePrice(4, 'max_selling_price')" v-model="skuForm.max_selling_price")
                      el-input(size="mini" placeholder="0.00" v-if="index === (row.length - 3)" @change="changePrice(3, 'shop_price')" v-model="skuForm.shop_price")
                      el-select(size="mini" placeholder="请选择" v-if="index === (row.length - 2)" @change="changePrice(2, 'unit')" v-model="skuForm.unit")
                        el-option(v-for="item, index in unitList" :key="index" :label="item.label" :value="item.value")
                      el-input(size="mini" type="number" placeholder="0" v-if="index === (row.length - 1)" @change="changePrice(1, 'store_count')" v-model="skuForm.store_count")
                    .table-td-body(v-else)
                  .table-td.table-td-del
                .table-tr(v-for="row, rowIndex in form.spec.prices.body" :key="rowIndex")
                  .table-td(
                    v-for="item,index in row"
                    :key="index"
                  )
                    .table-td-body.table-td-input(v-if="index > (row.length - 6)")
                      el-input(size="mini" v-model="row[index]" placeholder="请输入价格" @change="changeCostPrice(item, index, row)" v-if="index === (row.length - 5)")
                      el-input(size="mini" v-model="row[index]" placeholder="请输入价格" @change="changeCostPrice(item, index, row)" v-else-if="index === (row.length - 4)")
                      el-input(size="mini" v-model="row[index]" placeholder="请输入价格" @change="changeCostPrice(item, index, row)" v-else-if="index === (row.length - 3)")
                      el-select(size="mini" v-model="row[index]" placeholder="请选择" v-else-if="index === (row.length - 2)")
                        el-option(v-for="item, index in unitList" :key="index" :label="item.label" :value="item.value")
                      el-input(size="mini" placeholder="请输入库存" v-model="row[index]" @change="changeCostPrice(item, index, row)" type="number" v-else)
                    .table-td-body(v-else) {{item}}
                  .table-td.table-td-del(@click="deleteSku(row, rowIndex)") 删除
    sample-spec(:sampleData="form.sampleData")
    .upload-section
      .upload-section-header
        .upload-section-title 规格图片
      .upload-section-content
        .form-item-upload
          .form-item
            .form-item-label.form-item-label_import 材料主图
            .form-item-bd.form-item-bd-info 按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，建议尺寸800*800px
          .form-item
            .form-item-label
            .form-item-bd-img-list
              .form-item-bd
                .form-item-add.form-item-add_img(v-for="(item, index) in form.samplePhotosList", :key="index" :style="item.fileUrl | filterUrl")
                  i.el-checkbox-iconfont.el-icon-error(@click="delGoodsImg(item, index, form.samplePhotosList)")
                  .form-item-add_operation(v-if="!item.isMain" @click="changeOriginal($event, item.fileUrl)") 设为封面
                  .form-item-add_tag(v-else) 封面
              .flex-center
                ali-upload(
                  multiple
                  :limit="limit"
                  max="5"
                  accept="image/png, image/jpeg, image/jpg"
                  @getFileInfo="handleGridChange($event)" 
                )
                  el-button(size="small" type="primary") 上传图片
    .upload-section
      .upload-section-header
        .upload-section-title 材料详情
      .upload-section-content
        .form-item-upload
          .form-item
            .form-item-label.form-item-label_import 材料详情
            .form-item-bd.form-item-bd-info 按住ctrl可同时批量选择多张图片上传，拖动图片可调整顺序。
          .form-item(ref="detailImg")
            .form-item-label
            .form-item-bd-img-list
              .form-item-bd
                .form-item-add.form-item-add_img(
                  v-for="(site, index) in form.sampleDetailsList"
                  :key="index"
                  :style="site.fileUrl | filterUrl"
                  draggable="true"
                  @dragstart="handleDragStart($event, site.fileUrl)"
                  @dragover.prevent="handleDragOver($event, site.fileUrl)"
                  @dragenter="handleDragEnter($event, site.fileUrl)"
                  @dragend="handleDragEnd($event, site.fileUrl)"
                )
                  i.el-checkbox-iconfont.el-icon-error(@click="delDetailImg(index, form.sampleDetailsList)")
              .flex-center
                ali-upload(
                  multiple
                  accept="image/png, image/jpeg, image/jpg"
                  @getFileInfo="getFileInfo($event, 'sampleDetailsList')" 
                )
                  el-button(size="small" type="primary") 上传图片
    .upload-section
      .upload-section-header
        .upload-section-title 材料详情预览
      .upload-section-content
        .detail-footer-img(v-for="item in form.sampleDetailsList")
          .detail-goods-img
            img(:src="item.fileUrl | filterSrc")
    .content-footer
      el-button(name="primary" @click="prev") 上一步，选择材料分类
      el-button(type="primary" @click="next") 下一步，填写材料属性
  model-name-dialog(
    :show="showModelDialog"
    :skuList="modelDialogType === 'editSpecModel' ? form.spec : form.attr"
    :item="currentModelItem"
    :modelDialogType="modelDialogType"
    @close="closeModelDialog"
    @confirm="confirmModelDialog"
  )
  photo-modal(:show="showPhotoModal" :fileType="fileType" :fileMax="fileMax" @close="closePhotoModal" @confirm="confirmPhoto")
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { getBrandList, getStyles, getMaterialTemplate, FileUpload, saveMaterialTemplate, getSuppliersList } from 'api';
import draggable from 'vuedraggable'
import navbar from '@/components/navbar'
import modelNameDialog from '@/components/modal/modelNameDialog'
import photoModal from '@/components/modal/photoModal'
import sampleSpec from './sampleSpec'
import aliUpload from '@/components/customUpload'
export default {
  name: 'infoMoudule',
  components: {
    draggable,
    navbar,
    modelNameDialog,
    photoModal,
    sampleSpec,
    aliUpload
  },
  data () {
    return {
      showPhotoModal: false,
      fileType: '',
      fileMax: -1,
      form: {
        sampleName: '',
        sampleBrands: '',
        supplierId: '',
        supplierPrincipal: '',
        supplierPhone: '',
        prodPlace: '100000',
        materialType: '',
        sampleAttribute: 1,
        stylesSet: [],
        sampleDeliveryCycle: '',
        sampleDeliverTime: '',
        onSale: true,
        recommend: false,
        newFlag: false,
        shelfLocation: '',
        materialData: {
          items: [],
          table: {
            header: [],
            body: []
          }
        },
        sampleData: {
          items: [],
          table: {
            header: [],
            body: []
          }
        },
        spec: {
          items: [],
          prices: {
            header: [],
            body: []
          }
        },
        samplePhotosList: [],
        sampleDetailsList: []
      },
      rules: {
        sampleName: [
          { required: true, message: '请输入样品名称', trigger: 'blur' }
        ],
        sampleBrands: [
          { required: true, message: '请选择材料品牌', trigger: 'change' }
        ],
        supplierId: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],
        supplierPrincipal: [
          { required: true, message: '请输入供应商联系人', trigger: 'blur' }
        ],
        supplierPhone: [
          { required: true, message: '请输入供应商联系电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        prodPlace: [
          { required: true, message: '请选择生产产地', trigger: 'change' }
        ],
        materialType: [
          { required: true, message: '请输入材料型号', trigger: 'blur' }
        ],
        stylesSet: [
          { type: 'array', required: true, message: '请至少选择一个业态', trigger: 'change' }
        ],
        sampleDeliveryCycle: [
          { required: true, message: '请输入供货周期', trigger: ['blur', 'change'] }
        ],
        sampleDeliverTime: [
          { required: true, message: '请输入送样时间', trigger: ['blur', 'change'] }
        ],
      },
      uploadParams: {
        index: null,
        rowIndex: null
      },
      skuForm: {
        min_selling_price: '',
        max_selling_price: '',
        unit: '',
      },
      currentSpecModel: {}, // 当前模板
      specModal: [],
      brands: [],
      province: [],
      styleList: [],
      spaceList: [],
      suppliersList: [],
      supplyCycle: [
        { value: 7, num: '7' },
        { value: 15, num: '15' },
        { value: 30, num: '30' },
      ],
      showModelDialog: false,
      modelDialogType: '',
      currentModelItem: {},
      unitList: [
        { label: 'm²', value: 'm²' },
        { label: 'm', value: 'm' },
        { label: '件', value: '件' },
        { label: '套', value: '套' },
        { label: '块', value: '块' },
        { label: '个', value: '个' },
      ],
      move: {
        dragging: null
      },
    }
  },
  computed: {
    ...mapState({
      materialData: state => JSON.parse(JSON.stringify(state.material.materialData))
    }),
    limit: {
      get () {
        return 5 - this.form.samplePhotosList.length ? 5 - this.form.samplePhotosList.length : -1
      }
    },
    dragOptions () {
      return {
        animation: 60,
        handle: '.spec-table'
      }
    },
    dragChildOptions () {
      return {
        animation: 60,
        handle: '.icon-move'
      }
    }
  },
  methods: {
    ...mapActions([
      'changePreviewModal',
      'getDropdown',
      'changeMaterialData'
    ]),
    prev () {
      this.$emit('prev')
    },
    getFileInfo (data, key) {
      this.form[key].push(...data)
    },
    next () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let num = 0
          let countStatus = 0
          let storeCount = 0
          let reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/
          let reg1 = /^[+]{0,1}(\d+)$/
          let specFilter = this.form.spec.items.every(item => {
            let isChildName = item.values.every(row => !!row.name)
            return item.name && item.values.length && isChildName
          })
          if (this.form.sampleDeliveryCycle < 0) {
            this.$message.error('请输入正确的供货周期！')
            return
          }
          if (this.form.sampleDeliverTime < 0) {
            this.$message.error('请输入正确的送样时间！')
            return
          }
          if (!specFilter) {
            this.$message.error('请仔细检查材料规格是否有未填写的字段！')
            return
          }
          this.form.spec.prices.body.forEach((item, index) => {
            let len = item.length
            if (reg.test(parseFloat(item[len - 5])) && reg.test(parseFloat(item[len - 4])) && reg.test(parseFloat(item[len - 3]))) num++
            if (parseInt(item[len - 1]) && reg.test(item[len - 1])) storeCount++
            if (reg1.test(item[len - 1])) countStatus++
          })
          if (num !== this.form.spec.prices.body.length) {
            this.$message.error('请输入正确的SKU价格！')
            return
          }
          if (countStatus !== this.form.spec.prices.body.length) {
            this.$message.error('请仔细检查您设置的库存是否为正整数！')
            return
          }
          if (!storeCount) {
            this.$message.error('SKU中至少有一项规格必须有库存！')
            return
          }
          if (!this.form.sampleData.items.length) {
            this.$message.error('请输入物料间样品信息！')
            return
          }
          let sampleNum = 0
          let sampleCountStatus = 0
          let sampleFilter = this.form.sampleData.items.every(item => {
            let isChildName = item.values.every(row => !!row.name)
            return item.name && item.values.length && isChildName
          })
          if (!sampleFilter) {
            this.$message.error('请仔细检查物料间样品信息是否有未填写的字段！')
            return
          }
          this.form.sampleData.table.body.forEach((item, index) => {
            let len = item.length
            if (item[len - 2]) sampleCountStatus++
            if (reg1.test(parseFloat(item[len - 1]))) sampleNum++
            // if (parseInt(item[len - 1]) && reg.test(item[len - 1])) storeCount++
          })
          if (sampleNum !== this.form.sampleData.table.body.length) {
            this.$message.error('请输入正确的物料间样品库存！')
            return
          }
          if (sampleCountStatus !== this.form.sampleData.table.body.length) {
            this.$message.error('请仔细检查您设置的物料间样品单位是否正确！')
            return
          }
          // if (!storeCount) {
          //   this.$message.error('SKU中至少有一项规格必须有库存！')
          //   return
          // }
          if (!this.form.samplePhotosList.length) {
            this.$message.error('请上传材料主图！')
            return
          }
          if (!this.form.sampleDetailsList.length) {
            this.$message.error('请你上传的材料详情图！')
            return
          }
          this.changeMaterialData({ ...this.materialData, form: { ...this.form } })
          this.$emit('next')
        }
      })
    },
    async handleChange (file, fileList) {
      try {
        let fileObj = await this.fileUpload(file.raw)
        this.form.sampleDetailsList.push({ ...fileObj })
      } catch (err) {
        this.$message.error(err.ResultSet.errors)
      }
    },
    // 详情图拖动
    handleDragStart (ev, item) {
      this.move.dragging = item
    },
    handleDragOver (e) {
      e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter (e, item) {
      try {
        e.dataTransfer.effectAllowed = 'move' // 为需要移动的元素设置dragstart事件
        if (item === this.move.dragging) return
        const newItems = [...this.form.sampleDetailsList]
        let src = null
        let dst = null
        newItems.forEach((row, index) => {
          if (row.fileUrl === this.move.dragging) src = index
          if (row.fileUrl === item) dst = index
        })
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.form.sampleDetailsList = newItems
      } catch (err) {
        console.log(err)
      }
    },
    handleDragEnd (e, item) {
      this.move.dragging = null
    },
    closePhotoModal () {
      this.showPhotoModal = false
    },
    confirmPhoto (list) {
      if (this.fileType === 'grid') {
        list.forEach(item => {
          this.form.samplePhotosList.push({
            fileId: item.fileId,
            fileUrl: item.fileUrl,
            isMain: false
          })
        })
      } else {
        this.form.sampleDetailsList.push(...list)
      }
      this.closePhotoModal()
    },
    async handleGridChange (file) {
      try {
        file.map(item => {
          this.form.samplePhotosList.push({ ...item, isMain: false })
        })
        let valid = this.form.samplePhotosList.some(item => item.isMain)
        if (!valid) this.form.samplePhotosList[0].isMain = true
      } catch (err) {
        console.log(err)
        this.$message.error(err.ResultSet.errors)
      }
    },
    handleGridExceed () {
      this.$message.error('材料主图最多只能上传5张！')
    },
    changeOriginal (ev, item) {
      this.form.samplePhotosList.forEach(row => {
        row.isMain = false
        if (row.fileUrl === item) row.isMain = true
      })
    },
    // // 删除商品图册
    delGoodsImg (item, index, arr) {
      arr.splice(index, 1)
      if (item.isMain) arr[0].isMain = true
    },
    delDetailImg (index, arr) {
      arr.splice(index, 1)
    },
    // 获取规格模板
    async getSpecModel () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialTemplate, { type: 1 })
        if (ResultSet.userData && ResultSet.userData.sampleTemplateList && ResultSet.userData.sampleTemplateList.length) {
          ResultSet.userData.sampleTemplateList.forEach(item => {
            if (item.value.items && item.value.items.length) {
              item.value.items.forEach(row => {
                if (row.values.length) {
                  row.values.forEach(col => {
                    col.is_selected = true
                  })
                }
              })
            }
          })
          if (!this.$route.params.id) {
            this.currentSpecModel = ResultSet.userData.sampleTemplateList[0]
          }
          this.specModal = ResultSet.userData.sampleTemplateList
        }
      } catch (err) {
        this.$message.error(err.msg)
      }
    },
    // 替换规格模板
    changeModel (item, key) {
      this.$confirm('您确定要使用该模型吗？使用后会覆盖当前页面数据', '使用模型', {
        customClass: 'sold-message_box',
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'sold-button_sure'
      }).then(async () => {
        if (key === 'attr') {
          this.form.attr = item.value
          this.currentAttrModel = item
        } else {
          this.form.spec = {
            items: item.value.items,
            prices: {
              header: [],
              body: []
            }
          }
          this.currentSpecModel = item
          this.setUploadBtn()
          this.updataTable()
        }
      })
    },
    // 编辑规格模板名称
    editModelList (item, type) {
      this.modelDialogType = type
      this.currentModelItem = item
      this.showModelDialog = true
    },
    // 关闭模板名称弹窗
    closeModelDialog () {
      this.showModelDialog = false
      this.currentModelItem = {}
    },
    // 确认模板名称
    confirmModelDialog () {
      this.$message.success('保存成功！')
      this.currentModelItem = {}
      this.getCateModelList()
      this.showModelDialog = false
    },
    // 删除规格模板
    delModelList (item) {
      this.$confirm('确定删除该模型？删除模型不影响您现在编辑的内容', '删除模型提示', {
        customClass: 'sold-message_box',
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'sold-button_sure'
      }).then(async () => {
        try {
          await this.$axios.post(deleteTemplate, { id: item.id })
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          await this.getCateModelList()
        } catch (err) {
          this.$message.error(err.msg)
        }
      })
    },
    // 保存规格模板
    async saveSpecModal () {
      try {
        let query = JSON.parse(JSON.stringify(this.currentSpecModel))
        query.value.items.forEach(item => {
          item.values.forEach(row => {
            row.image = ''
          })
        })
        query.value = JSON.stringify(query.value)
        await this.$axios.post(saveMaterialTemplate, { ...query })
        this.$message.success('保存成功！')
      } catch (err) {
        console.log(err)
        this.$message.error(err.msg)
      }
    },
    // 新增规格模板
    async addSpecModal (type) {
      this.modelDialogType = type
      this.showModelDialog = true
    },
    // 规格处理
    // 规格调整位置更新SKU表
    draggableEnd (e) {
      this.updataTable()
    },
    // 规格名称修改
    changeSpecName (item, index) {
      if (!item.name) {
        this.form.spec.items[index].values = []
      }
      this.updataTable()
    },
    // 删除规格项
    async delSpec (item, index) {
      this.$confirm('确定删除该规格吗？', '删除规格提示', {
        customClass: 'sold-message_box',
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'sold-button_sure'
      }).then(async () => {
        this.form.spec.items.splice(index, 1)
        this.setUploadBtn()
        this.updataTable()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    // 删除规格属性
    delSpecValue (row, index, arr) {
      arr.splice(index, 1)
      this.updataTable()
    },
    // 规格值改变更新SKU
    changeSpecValue (item, row, index, rowIndex) {
      if (!row.name.replace(/^\s+|\s+$/g,"")) {
        this.$message.error('规格值不可以为空！')
      } else {
        row.is_selected = true
        this.updataTable()
      }
    },
    // 大图预览图片
    seeImage (file) {
      this.changePreviewModal({
        show: true,
        url: file
      })
    },
    // 删除规格属性图片
    deleteImage (row, index) {
      row.image = ''
    },
    async changeFile (event, index, rowIndex) {
      let valid = false
      this.form.spec.items.map((spec, specIndex) => spec.values.map(col =>{
        if (col.image && index !== specIndex) {
          valid = true
        }
      }))
      if (valid) {
        this.$message.error('只能选择一个规格上传图片！')
        return
      }
      this.uploadParams.index = index
      this.uploadParams.rowIndex = rowIndex
      let file = event[0]
      this.$set(this.form.spec.items[this.uploadParams.index].values[this.uploadParams.rowIndex], 'image', `${file.fileUrl}`)
      this.$set(this.form.spec.items[this.uploadParams.index].values[this.uploadParams.rowIndex], 'fileId', `${file.fileId}`)
      this.uploadParams = { index: null, rowIndex: null }
    },
    async fileUpload (raw) {
      return new Promise(async (resolve, reject) => {
        try {
          let formData = new FormData()
          formData.append('Filedata', raw)
          formData.append("applicationId",4)
          const { ResultSet } = await this.$axios.post(FileUpload, { formData: formData, isUpload: true }, { headers:{ "Content-Type": "multipart/form-data" } })
          resolve({ ...ResultSet.Result[0] })
        } catch (err) {
          console.log(err)
          reject(err)
        }
      })
    },
    // 批量改变规格价格
    changePrice (index, key) {
      let reg = /^\d+(\.\d+)?$/
      if (index === 3 && !reg.test(this.skuForm.min_selling_price)) {
        this.$message.error('请输入正确的价格！')
        return
      }
      if (index === 2 && !reg.test(this.skuForm.max_selling_price)) {
        this.$message.error('请输入正确的价格！')
        return
      }
      this.form.spec.prices.body.forEach(row => {
        this.setSkuTable(row, index, key)
      })
    },
    setSkuTable (row, num, key) {
      this.$set(row, row.length - num, this.skuForm[key] ? this.skuForm[key] : row[row.length - num])
    },
    // 单个修改规格价格
    changeCostPrice (val, index, row) {
      let reg = /^\d+(\.\d+)?$/
      if (!reg.test(val)) {
        this.$message.error('请输入正确的数字！')
        this.vaild = true
      } else {
        this.vaild = false
      }
    },
    // 删除规格SKU
    deleteSku (item, index) {
      this.form.spec.prices.body.splice(index, 1)
      if (this.form.spec.prices.body.length) {
        let len = this.form.spec.prices.header.length
        let defaultNum = 8
        let obj = {}
        this.form.spec.items.forEach((spec, specIndex) => {
          spec.values.forEach(row => {
            if (row.is_selected) obj[row.name] = specIndex
          })
        })
        // 思路： 规格中所有勾选中的规格项如果在sku表中对应位置的name不存在那么就取消勾中状态
        let newObj = {}
        this.form.spec.prices.body.forEach(bodyItem => {
          let num = 0
          for (let key in obj) {
            if (!newObj[key]) newObj[key] = 0
            if (bodyItem[obj[key]] === key) newObj[key]++
          }
        })
        for (let newKey in newObj) {
          if (!newObj[newKey]) {
            let index = this.form.spec.items[obj[newKey]].values.findIndex(val => val.name === newKey)
            if (index >= 0) this.form.spec.items[obj[newKey]].values.splice(index, 1)
          }
        }
      } else {
        this.form.spec.items.forEach((spec) => {
          spec.values = []
        })
      }
    },
    // 添加规格属性
    async addSpec (item) {
      try {
        item.values.push({
          image: '',
          is_selected: true,
          name: ''
        })
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    // 添加规格项
    async settingSpec () {
      try {
        if (this.form.spec.items.length >= 3) {
          this.$message.error('材料规格最多3个！')
          return
        }
        this.form.spec.items.push({
          name: '',
          showUploadBtn: false,
          values: []
        })
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    // 保存规格模板
    async saveSpecModal () {
      try {
        let query = JSON.parse(JSON.stringify(this.currentSpecModel))
        query.value.items.forEach(item => {
          item.values.forEach(row => {
            row.image = ''
          })
        })
        query.value = JSON.stringify(query.value)
        await this.$axios.post(saveMaterialTemplate, { ...query })
        this.$message.success('保存成功！')
      } catch (err) {
        this.$message.error(err.msg)
      }
    },
    selectProvince (id) {
      this.getRegion({ id: id, type: 'city' })
    },
    fetchSupplyCycle (queryString, cb) {
      cb(this.supplyCycle)
    },
    // 获取品牌
    async getBrands () {
      try {
        const { ResultSet } = await this.$axios.post(getBrandList)
        this.brands = ResultSet.userData.loadBrandList
      } catch (err) {
        console.log(err)
        this.$message.error(err.msg)
      }
    },
    // 获取行政区域
    async getRegion () {
      try {
        let arr = await this.getDropdown({key: 'region_countries'})
        this.province = arr
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    // 获取风格
    async getStyle () {
      try {
        const { ResultSet } = await this.$axios.post(getStyles)
        this.styleList = ResultSet.userData.stylesList
      } catch ({ msg }) {
        this.$message.error(msg)
      }
    },
    async getCateModelList () {
      try {
        await this.getSpecModel()
        // await this.getAttrModel()
      } catch (err) {
        console.log(err)
      }
    },
    // 获取规格属性
    async getDefaultModel () {
      try {
        this.loading = true
        await this.getSpecDetail()
        // await this.getAttrDetail()
        this.loading = false
      } catch ({ msg }) {
        this.loading = false
        this.$message.error(msg)
      }
    },
    async getSpecDetail () {
      try {
        // const { data: { goods_spec: spec } } = await this.$axios.get(getSpecDetail, { params: { model_id: this.currentSpecModel.id } })
        this.form.spec = this.currentSpecModel.value
        this.form.spec.prices = { header: [], body: [] }
        if (this.form.spec.items.length) {
          this.form.spec.items.forEach(item => {
            item.values.forEach(row => {
              row.is_selected = true
            })
          })
          this.setUploadBtn()
          this.changeChildCheckbox()
        }
      } catch (err) {
        console.log(err)
        this.$message.error(err.msg)
      }
    },
    setUploadBtn () {
      if (this.form.spec.items.length) {
        this.form.spec.items.forEach(item => {
          if (item.values.length) {
            item.values.forEach(row => {
              if (row.image) item.showUploadBtn = true
              else item.showUploadBtn = false
            })
          }
        })
        let status = this.form.spec.items.every((item, index) => { return !item.showUploadBtn })
        if (status) this.form.spec.items[0].showUploadBtn = true
      }
    },
    async updataTable (item, headerIndex, type) {
      let spec_arr = []
      this.skuForm = {
        min_selling_price: '',
        max_selling_price: '',
        shop_price: '',
        unit: '',
        store_count: ''
      }
      // 遍历所有规格，规格属性选中后以规格项名为key规格属性为值的形式保存下来
      this.form.spec.items.forEach((items, itemsIndex) => {
        items.values.forEach(row => {
          if (row.is_selected) {
            if (!spec_arr[itemsIndex] || !spec_arr[itemsIndex].name) spec_arr[itemsIndex] = { name: items.name, values: [] }
            spec_arr[itemsIndex].values.push(row.name)
          }
        })
      })
      // 枚举选中规格
      let navbar  = []
      let arr = []
      spec_arr.forEach(spec => {
        navbar.push(spec.name)
        arr.push(spec.values)
      })
      // 如果为空清空sku
      if (!navbar.length) {
        this.form.spec.prices = { header: [], body: [] }
        return
      }
      // 为sku表头追加默认数据
      let header = ['最低市场价格', '最高市场价格', '成交价格', '单位', '库存量']
      navbar = [...navbar, ...header]
      let result = await this.reduceMultipleArr(arr)
      let body = []
      result.forEach(item => {
        let row = item.split(/&#/)
        let prices = ['', '', '', '', '']
        row = [...row, ...prices]
        body.push(row)
      })
      if (type === 'new') {
        let newBody = []
        body.forEach(bodyItem => {
          if (bodyItem[headerIndex] === item.name) {
            newBody.push(bodyItem)
          }
        })
        this.form.spec.prices = { header: navbar, body: [...this.form.spec.prices.body, ...newBody] }
      } else {
        this.form.spec.prices = { header: navbar, body: body }
      }
    },
    async changeChildCheckbox (item, row, index, rowIndex) {
      try {
        // 规格变化sku表变化
        /**
         * this.form.spec.prices.body sku表body
         * this.form.spec.prices.header sku表头
         * 当body且header 有数据规格选项改变时考虑原有数据保留情况
         * 勾选规格属性:
         *   当规格项在已有数据当中，取索引
         * **/
        if (this.form.spec.prices.body.length && this.form.spec.prices.header.length) {
          let copyBody = JSON.parse(JSON.stringify(this.form.spec.prices.body))
          let spliceArr = []
          // debugger
          // 取选中规格属性所在的规格项
          let headerIndex = this.form.spec.prices.header.findIndex(name => name === item.templateName)
          // 规格属性取消
          if (!row.is_selected) {
            // 记录当前选中规格项中所有规格属性的选中状态 没选中记录一次
            let num = 0
            item.values.forEach(valuesItem => {
              if (!valuesItem.is_selected) num++
            })
            /**
             * 如果当前规格项中所有属性都没选中，sku表中要删除规格项这一列，并且删除对应规格属性，所有价格数据重置
             * 否则只删除选中规格属性项，保留原有数据
             * **/
            if (num === item.values.length) {
              this.updataTable()
            } else {
              this.form.spec.prices.body.forEach((bodyItem, bodyIndex) => {
                if (bodyItem[headerIndex] === row.name) spliceArr.push(bodyIndex)
              })
              for (let i = 0; i < spliceArr.length; i++) {
                this.form.spec.prices.body.splice(spliceArr[i] - i, 1)
              }
            }
          // 规格属性选中
          } else {
            /**
             * 如果选中规格项在原有sku数据中存在，保留原有数据，并用选中规格属性与除开自己规格项中其他所有规格项中的所有规格属性组合成行的sku
             * 否则生成全新sku表
             * **/
            if (headerIndex >= 0) this.updataTable(row, headerIndex, 'new')
            else this.updataTable()
          }
        } else {
          // 生成全新sku表
          this.updataTable()
        }
      } catch (err) {
        console.log(err)
        this.$message.error(err.msg)
      }
    },
    reduceMultipleArr (arr = []) {
      return arr.reduce((acc,currentItem)=>{
        return this.reduceTwoArr(acc,currentItem)
      })
    },
    reduceTwoArr (source1, source2) {
      let result = []
      source1.forEach(item => {
        source2.forEach(item2 => {
          result.push(`${item}&#${item2}`)
        })
      })
      return result
    },
    async getSuppliersList () {
      try {
        const { ResultSet } = await this.$axios.post(getSuppliersList, { currentPage: 1, pageLines: 999999 })
        let hash = {}
        ResultSet.userData.result = ResultSet.userData.result.reduce(function(item, next) {
            hash[next.objectId] ? '' : hash[next.objectId] = true && item.push(next);
            return item
        }, [])
        this.suppliersList = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  async created () {
    await this.getSuppliersList()
    await this.getStyle()
    await this.getRegion()
    await this.getBrands()
    await this.getCateModelList()
    this.form = { ...this.form, ...this.materialData.form }
    if ((!this.form.spec || !this.form.spec.items || !this.form.spec.items.length) && !this.$route.params.id) await this.getDefaultModel()
  },
}
</script>

<style lang="scss" scoped>
.upload-body {
  padding: 0 32px 16px;
}
.upload-section-form {
  background: #fff;
}
.upload-section {
  width: 100%;
  margin-top: 20px;
  background: #fff;
  padding: 25px 0;
  border-radius: 4px;
  display: flex;
}
.upload-section-header {
  width: 250px;
  padding: 0 22px;
  .upload-section-title {
    padding: 10px 16.5px;
    border-radius: 0 50px 50px 0;
    background: #FF708B;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
  }
}
.upload-section-content {
  flex: 1;
  padding: 0 22px;
}
.form-item {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 12px;
  color: #333333;
  &.form-item-start {
    align-items: flex-start;
    .form-item-label {
      line-height: 60px;
    }
  }
  &.spec-sku {
    .form-item-label {
      line-height: 20px;
    }
  }
  &.form-item-top {
    align-items: flex-start;
  }
  & .form-item-body {
    display: flex;
    align-items: center;
    width: 1000px;
  }
  & .form-item-label {
    min-width: 130px;
    text-align: right;
    padding-right: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    &.form-item-label_import {
      &:before {
        content: '*';
        color: #FF0000;
      }
    }
    &.form-item-label_strong {
      font-weight: 600;
      font-size: 14px;
    }
  }
  & .form-item-bd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 5px;
    min-width: 340px;
    & .el-checkbox-group {
      margin-right: 40px;
      & .el-checkbox {
        margin-right: 20px;
      }
    }
    & .form-item-bd_input {
      display: flex;
      min-width: 130px;
      margin-bottom: 6px;
      height: 40px;
      line-height: 40px;
      padding-left: 21px;
      align-items: center;
      & .el-input {
        width: 200px;
        margin-right: 10px;
      }
      & .form-item-bd_input-value {
        color: #0f73e6;
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
  & .form-item-bd_setting {
    display: flex;
    align-items: center;
    margin-left: 5px;
    margin-right: 10px;
    width: 150px;
    max-width: 150px;
  }
}
.form-item-edit {
  margin-left: 5px;
  color: #0f73e6;
  cursor: pointer;
  .iconfont {
    margin-right: 5px;
  }
}
.flex-center {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 15px;
  }
}
.form-item-input {
  .el-input {
    width: 500px;
  }
}
.form-item-ft-info {
  margin-left: 10px;
  font-size: 14px;
  color: #CCCCCC;
  line-height: 28px;
}
.form-item-spec {
  flex: 1;
}
.spec-table {
  margin-bottom: 20px;
}
.spec-table-header {
  width: 100%;
  height: 60px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
  border: 1px solid #D9D9D9;
}
.spec-hd-value {
  display: flex;
  align-items: center;
  .spec-hd-value-label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
  }
  .spec-hd-value-bd {
    width: 150px;
    margin-left: 20px;
  }
}
.spec-hd-handle {
  display: flex;
  align-items: center;
  cursor: pointer;
  .iconfont {
    font-size: 14px;
    background: #999999;
  }
  .spec-hd-handle-btn {
    margin-left: 10px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
    cursor: pointer;
  }
}
.spec-table-handle {
  margin-top: 20px;
  display: flex;
  align-items: center;
  .spec-table-handle-info {
    margin-left: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #CCCCCC;
    line-height: 20px;
  }
}
.spec-table-body {
  padding: 24px 46px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-top: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .spec-table-body-label {
    margin-right: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    flex-shrink: 0;
    margin-bottom: 10px;
  }
  .spec-table-body-value {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    .spec-table-body-input {
      position: relative;
      width: 150px;
      & .iconfont {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
        transform: translate(50%, -50%);
        z-index: 99;
        cursor: pointer;
      }
      &:hover {
        & .iconfont {
          display: inline-block;
        }
      }
    }
    &:hover {
      & .spec-item-ft {
        opacity: 1;
      }
    }
    & .spec-item-ft {
      display: flex;
      opacity: 0;
      align-items: center;
      padding-left: 10px;
      .iconfont {
        font-size: 20px;
        color: #999;
      }
    }
    .spec-table-body-img {
      position: relative;
      width: 28px;
      height: 28px;
      margin-left: 10px;
      background: #FFFFFF;
      border: 1px solid #DDDDDD;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      .iconfont {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
        transform: translate(50%, -50%);
      }
    }
    .spec-table-body-upload {
      position: relative;
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
      cursor: pointer;
      & .el-input {
        width: 68px;
        height: 28px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
      }
    }
  }
  .spec-table-body-ft {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0F73E6;
    line-height: 20px;
    cursor: pointer;
    margin-bottom: 10px;
  }
}
.spec-sku-table {
  flex: 1;
  .spec-sku-info {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.upload-form-bd-header {
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 20px;
  background: #FAFAFA;
  display: flex;
  align-items: center;
}
.form-bd-title {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 20px;
}
.model-body {
  max-height: 200px;
  overflow-y: auto;
  .model-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
  }
  .model-item-title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
  }
  .model-item-handle {
    display: flex;
    align-items: center;
    .iconfont {
      margin-left: 10px;
    }
  }
  .model-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 20px;
  }
  .model-item {
    padding: 9px 20px;
    border-bottom: 1px solid #DDDDDD;
    cursor: pointer;
    &:hover {
      background: #F8F8F8;
      .model-item-setting {
        display: inline-block;
      }
      .model-item-time_handle {
        display: inline-block;
      }
    }
  }
  .model-item-default {
    font-size: 14px;
    color: #333333;
  }
  .model-item-setting {
    display: none;
    font-size: 14px;
    color: #0f73e6;
    cursor: pointer;
  }
  .model-item-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    line-height: 20px;
    .model-item-time_bd {
      font-size: 14px;
      color: #999999;
    }
    .model-item-time_handle {
      display: none;
      font-size: 14px;
      color: #C2212A;
    }
  }
}
.form-bd-select {
  width: 150px;
  height: 28px;
  padding: 4px 10px;
  margin-left: 20px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #D9D9D9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
  .form-bd-select-value {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 20px;
    &.form-bd-select-value-placeholder {
      color: #ccc;
    }
  }
}
.form-bd-header-handle {
  display: flex;
  align-items: center;
  .form-bd-header-btn {
    padding: 5px 18px;
    margin-left: 20px;
    background: #ECECEC;
    border-radius: 2px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 18px;
    cursor: pointer;
  }
}
.table-list {
  & .table-tr {
    display: flex;
    & .table-td {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 100px;
      flex: 1;
      border: 1px solid #DDD;
      border-top: none;
      border-right: none;
      &:last-child {
        border-right: 1px solid #DDD;
      }
      & .table-td-body {
        text-align: center;
        &.table-td-input {
          width: 100px;
        }
      }
    }
  }
}
.form-item-draggable,
.form-item-draggable-transition {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.form-item-bd-info {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.form-item-add {
  width: 110px;
  height: 110px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  &.form-item-add_upload {
    cursor: pointer;
    border: 1px dashed #999;
  }
  &.form-item-add_img {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-bottom: 15px;
    & .el-checkbox-iconfont {
      position: absolute;
      right: -8px;
      top: -8px;
      font-size: 16px;
      display: none;
    }
    & .form-item-add_operation {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.50);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 17px;
    }
    .form-item-add_tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 45px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.50);
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 17px;
    }
  }
  & .el-icon-plus {
    display: block;
    font-size: 36px;
    color: #999
  }
  & .form-item-add_text {
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}
.detail-footer-imgs {
  padding: 30px 0 0;
  text-align: center;
}
.detail-footer-img {
  text-align: center;
}
.detail-footer-img img {
  height: 100%;
}
.content-footer {
  margin-top: 20px;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #ebeef5;
}
</style>